<template>
	<view class="">
		<!-- 上部背景区域 -->
		<view class="album_bg">
			<image :src="album.cover" mode="widthFix"></image>
			<view class="album_info">
				<view class="album_name">{{album.name}}</view>
				<veiw class="album_btn">关注</veiw>
			</view>
		</view>
		
		<!-- 中部详情页 -->
		<view class="album_author">
			<view class="author_info">
				<image :src="album.user.avatar" mode="widthFix"></image>
				<view class="info_name">{{album.user.name}}</view>
			</view>
			<!-- 描述 -->
			<view class="author_desc">{{album.desc}}</view>
		</view>
		
		<!-- 下部列表 -->
		<view class="album_list">
			<view class="album_item"
			v-for="(item,index) in wallpaper"
			:key="item.id"
			>
				<goDetail :list="wallpaper" :index="index">
					<image mode="widthFix" :src="item.thumb+item.rule.replace('$<Height>',450)"></image>
				</goDetail>
			</view>
		</view>
		
	</view>
</template>

<script>
	import goDetail from "../../components/goDetail/goDetail.nvue"
	export default{
		data(){
			return{
				album:{},
				wallpaper:[],
				params:{
					limit:5,
					order:"new",
					skip:0,
					first:1
				}
			}
		},
		onLoad(e){
			const {id} = e
			this.getAllList(id)
		},
		//页面触底
		onReachBottom() {
			this.params.skip = this.params.skip + this.params.limit
			this.getAllList()
		},
		mounted(){
			
		},
		methods:{
			async getAllList(id){
				const res = await this.$request({
					url: `/image/v1/wallpaper/album/${id}/wallpaper`,
					// url: "/image/v1/wallpaper/album/5e0ea895e7bce739990ba8a1/wallpaper",
					data: this.params
				})
				const { album,wallpaper } = res
				if(!this.album.id){ this.album = album }
				this.wallpaper = [...this.wallpaper,...wallpaper]
				this.params.first = 0
				if(wallpaper.length == 0){uni.showToast({title:"没有更多数据了>_<"})}
				// console.log(this.album)
				// console.log(wallpaper)
				// console.log(id)
			}
		},
		components:{
			goDetail
		}
	}
</script>

<style lang="scss">
	.album_bg{
		position: relative;
		font-size: 0;
		image{
			
		}
		.album_info{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			align-items: center;
			color: #ccc;
			padding: 0 30rpx;
			.album_name{
				font-size: 40rpx;
			}
			.album_btn{
				font-size: 24rpx;
				background-color: $color;
				width: 152rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				opacity: 0.8;
			}
		}
	}
	
	.album_author{
		padding: 20rpx;
		.author_info{
			padding: 10rpx 0;
			display: flex;
			image{
				width: 50rpx;
			}
			.info_name{
				margin-left: 15rpx;
				font-weight: 600;
				color: #000;
			}
		}
		.author_desc{
			padding: 0 25rpx;
		}
	}
	
	.album_list{
		font-size: 0;
		.album_item{
			border: 3rpx solid #fff;
			border-top: none;
			image{
				
			}
		}
	}
</style>
